<template>
  <div>
    <el-card >
      <el-row :gutter="12" style="margin-bottom: 15px">
        <el-col :span="12">
          <el-card>就业人数：{{totalStat}}</el-card>
        </el-col>
        <el-col :span="12">
          <el-card>毕业总人数：{{totalOuttime}}</el-card>
        </el-col>
      </el-row>
      <el-row :gutter="12" style="margin-bottom: 15px">
       <el-col :span="12">
         <el-card>
           <div id="pie" style="width: 600px;height: 300px"></div>
         </el-card>
       </el-col>
        <el-col :span="12">
          <el-card>
            <div id="bar" style="width: 600px;height: 300px"></div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="12" style="margin-bottom: 15px">
        <el-col :span="12">
          <el-card>
            <div id="line" style="width: 600px;height: 300px"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div id="lineArea" style="width: 600px;height: 300px"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>



<script>
import {getStatCount,getOutTimeCount,getGroupStat,getStudentemploymentSpecilityMoney,getStudentemploymentSpecilitySex} from '@/api/studentemployment/studentemployment'

export default {

  data() {
    return {
      totalStat:0,
      totalOuttime:0,
    };
  },
  mounted() {
    this.showPie()
    this.showBar()
    this.showLine()
    this.showLineArea()
    this.getStatCounts()
    this.getOutTimeCounts()
  },
  methods: {
    //获取为就业人数
    getOutTimeCounts(){
      getOutTimeCount().then(response=>{
        this.totalOuttime = response.data
      })
    },
    //获取就业人数
    getStatCounts(){
      getStatCount().then(reponse=>{
        this.totalStat = reponse.data
      })
    },

    showLineArea(){
      let myChart = this.$echarts.init(document.getElementById("lineArea"))
      myChart.setOption({
        title: {
          text: '省份就业人数'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          data: ['陕西', '甘肃', '河南', '河北', '湖南']
        },
        series: [
          {
            name: '人数占比',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: [
              { value: 60, name: '陕西' },
              { value: 40, name: '甘肃' },
              { value: 20, name: '河南' },
              { value: 80, name: '河北' },
              { value: 100, name: '湖南' }
            ]
          }
        ]
      })
    },
    showLine(){
      let lineEcharts = this.$echarts.init(document.getElementById("line"))
      getStudentemploymentSpecilitySex().then(response=>{
        let array = response.data
        let spearr = []
        let sexarr = []
        let totalarr = []
        for (let i in array) {
          spearr.push(array[i].name)
          sexarr.push(array[i].sex)
          totalarr.push(array[i].total)
        }

        lineEcharts.setOption(
          {
          title: {
            text: '大学生就业各专业就业人数',
              subtext: '就业人数',
              left: 'center'
          },
            xAxis: {
              type: 'category',
              data: spearr
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: totalarr,
                type: 'line'
              }
            ]
          }
        )
      })

    },
    showBar(){
      let barEcharts = this.$echarts.init(document.getElementById("bar"))
      getStudentemploymentSpecilityMoney().then(response=>{
        let array = response.data
        let arrspe =[]
        let arrmon = []
        for (let i in array) {
          arrspe.push(array[i].name)
          arrmon.push(array[i].money)
        }
        barEcharts.setOption(
          {
            title: {
              text: '大学生就业专业平均薪资',
              subtext: '薪资',
              left: 'center'
            },
            xAxis: {
              type: 'category',
              data: arrspe
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: arrmon,
                type: 'bar'
              }
            ]
          }
        )
      })

    },
    showPie(){
      let pieEcharts = this.$echarts.init(document.getElementById("pie"))
      getGroupStat().then(response=>{
        console.info(response.data)
        let arr = response.data
        let arr1 = []
        for (let i in arr) {
            if(arr[i].name == '0'){
              arr1.push({name:'已就业学生',value:arr[i].value})
            }else{
              arr1.push({name:'未就业学生',value:arr[i].value})
            }
        }
        console.info(arr1)
        pieEcharts.setOption(
          {
            title: {
              text: '大学生就业与未就业占比',
              subtext: '就业',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: '学生就业信息',
                type: 'pie',
                radius: '50%',
                data: arr1,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
        )

      })

    }
  }
};
</script>

<style scoped lang="scss">
  .el-card{
    margin-top: 10px;
  }
</style>

